<template>
	<view class="container">
		<view class="line-list">
			<view class="line-item" v-for="item in lineArr" :key="item.id">
				<view class="line-content">
					<text class="line-title">{{item.title}}</text>
					<text class="line-id">编号：{{item.mac}}</text>
				</view>
				<view class="line-buttons">
					<text class="btns1" @click="bianJi(item)">编辑</text>
					<text class="btns1">连接</text>
				</view>
			</view>
		</view>
		
		<view style="text-align: center;margin-top: 100rpx;">
		<text class="btns" @click="saveNext">保存并进入下一步</text>
		</view>
	</view>

	<uni-popup ref="inputDialog" type="dialog">
		<uni-popup-dialog ref="inputClose" mode="input" title="编辑线路名称" v-model="names" placeholder="请输入名称"
			@confirm="dialogInputConfirm"></uni-popup-dialog>
	</uni-popup>
	
	
</template>

<script setup>
	import {
		ref,onUnmounted,onMounted,
		watch
	} from 'vue';
	import {
		getDeviceLineList
	} from "@/api/wuLian.js"
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app"
	
	const wifiList = ref([])
	const scanning = ref(false)
	const wifiPassword = ref("")
	const currentWifi = ref(null)
	const savedWifiPasswords = ref({}) // 用于保存WiFi密码
	
	onMounted(()=>{
		
	})
	

	


	const savePasswordValues = ref("")

	onLoad((option) => {
		getDeviceLineList(option.mac).then(e => {
			lineArr.value = e.data
		})
	})
	
	function saveNext(){
		uni.redirectTo({
			url:"/wuLian/pages/index"
		})
	}
	const inputDialog = ref()
	const passwordDialog = ref()
	const lineArr = ref([])
	const names = ref("")
	const currtion = ref({})

	function bianJi(item) {
		console.log(item, 43)
		names.value = item.title
		currtion.value = item
		inputDialog.value.open()
	}

	function dialogInputConfirm(e) {
		currtion.value.title = e
		currtion.value = {}
		names.value = ""
	}
	
</script>

<style scoped>
	.container {
		height: 100vh;
		background-color: rgba(250, 250, 250, 1);
		padding: 20rpx;
	}
	
	.scan-btn {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}
	
	.wifi-list {
		margin-bottom: 30rpx;
	}
	
	.wifi-item {
		height: 140rpx;
		margin: 10rpx 0;
		border: 2rpx solid #e0e0e0;
		border-radius: 10rpx;
		display: flex;
		background-color: #fff;
		padding: 0 20rpx;
	}
	
	.wifi-content {
		flex: 1;
		padding: 15rpx;
		display: flex;
		flex-direction: column;
	}
	
	.wifi-name {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 8rpx;
	}
	
	.wifi-signal {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 15rpx;
	}
	
	.wifi-buttons {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.line-item {
		height: 140rpx;
		margin: 10rpx 0;
		border: 2rpx solid #e0e0e0;
		border-radius: 10rpx;
		display: flex;
		background-color: #fff;
		padding: 0 20rpx;
	}

	.line-content {
		flex: 1;
		padding: 15rpx;
		display: flex;
		flex-direction: column;
	}

	.line-title {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 8rpx;
	}

	.line-id {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 15rpx;
	}

	.line-buttons {
		display: flex;
		gap: 20rpx;
		justify-content: center;
		align-items: center;
	}

	.btns1 {
		background-color: #E60012;
		border-radius: 10rpx;
		color: #fff;
		padding: 5rpx 10rpx;
		height: 50rpx;
	}

	.btns {
		background-color: #E60012;
		color: #fff;
		padding: 20rpx 40rpx;
		font-size: 26rpx;
		border-radius: 10rpx;
	}
</style>